import { Text, View, StyleSheet , Image , TouchableOpacity  } from 'react-native'
import React, { Component } from 'react'
import { showModel , dismissModel , checkSiblingsIsNull } from './modal/ModalActions'

//导入资源
const warningPopUp = require('./assets/warning.png');

//全局的弹框collection数组容器
let popupArray : Array<Component> = [];

//定义type

/**
 * 自定义单个按钮弹框的样式需要的相关字段
 */
type SingleDialogParamType = {
  title ?: string,
  content ?: string
  onlyBtnText ?: string
  onlyBtnAction ?: ()=>void,
}

type MultiDialogParamType = {
  title ?: string,
  content ?: string
  leftBtnText ?: string
  leftBtnAction ?: ()=>void,
  rightBtnText ?: string
  rightBtnAction ?: ()=>void,
  popupIndex ?: number
}

function showDialog(params : SingleDialogParamType){
  showModel(
    <MentionPopUp {...params}/>
  );
}

function showMultiDialogs(params : MultiDialogParamType){
  let popupIndex = popupArray.length;
  popupArray.push(
    <CommonPopup {...params} popupIndex={popupIndex}/>
  )
  
  if(checkSiblingsIsNull()){
    fetchDialog(0);
  }
}

function fetchDialog(index : number){
  if(popupArray.length > 0 && popupArray.length > index){
    const Dialog = popupArray[index];
    console.log("Dialog is ",Dialog);
    showModel(Dialog);
  }else{
    popupArray = [];
  }
}


//弹框样式1: title + content + onlyBtn
function MentionPopUp(props : SingleDialogParamType){
  const { title = '提示',content = '',onlyBtnText = '确认',onlyBtnAction } = props;
  return (
    <View style={styles.popUpStyle}>
      <View style={{alignItems : 'center',height:180,justifyContent:'space-around',paddingVertical:10}}>
        <Image source={warningPopUp} style={styles.popUpImgStyle}></Image>
        <Text style={styles.popUpTitleStyle}>{title}</Text>
        <Text style={styles.popUpDetailStyle}>{content}</Text>
      </View>
      {/* bottom Area */}
      <View style={{height:50,borderTopColor:'#DDDDDD',borderTopWidth:1,width:'100%',justifyContent:'center'}}>
        <TouchableOpacity onPress={()=>{
          console.log("确定");
          dismissModel();
          onlyBtnAction && onlyBtnAction();
        }}>
          <Text style={{color : '#289178', fontSize:16, alignSelf:'center' }}>{onlyBtnText}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

//弹框样式2: title + content + leftBtn + rightBtn
function CommonPopup(props : MultiDialogParamType) {
  const { title = '提示',content = '',rightBtnText = '确认',rightBtnAction,leftBtnText='取消',leftBtnAction, popupIndex = 0 } = props;
  return (
    <View style={styles.popUpStyle}>
      <View style={{alignItems : 'center',height:180,justifyContent:'space-around',paddingVertical:10}}>
        <Image source={warningPopUp} style={styles.popUpImgStyle}></Image>
        <Text style={styles.popUpTitleStyle}>{title}</Text>
        <Text style={styles.popUpDetailStyle}>{content}</Text>
      </View>
      {/* bottom Area */}
      <View style={{height:50,borderTopColor:'#DDDDDD',borderTopWidth:1,width:'100%',justifyContent:'center',flexDirection:'row'}}>
        <TouchableOpacity onPress={()=>{
          console.log("取消");
          dismissModel();
          leftBtnAction && leftBtnAction();

          fetchDialog(popupIndex+1);

        }} style={{flex:1,height:'100%',alignItems:'center',justifyContent:'center'}}>
          <Text style={{color : 'black', fontSize:16, alignSelf:'center' }}>{leftBtnText}</Text>
        </TouchableOpacity>

        <View style={{width:1,height:'100%',backgroundColor:'#DDDDDD'}}/>

        <TouchableOpacity onPress={()=>{
          console.log("确定");
          dismissModel();
          rightBtnAction && rightBtnAction();

          fetchDialog(popupIndex+1);

        }} style={{flex:1,height:'100%',alignItems:'center',justifyContent:'center'}}>
          <Text style={{color : '#289178', fontSize:16, alignSelf:'center' }}>{rightBtnText}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  popUpStyle : {
    width : 280,
    height : 230,
    backgroundColor : 'white',
    borderRadius : 8,
  },
  popUpImgStyle : {
    width : 60,
    height : 60
  },
  popUpTitleStyle : {
    fontSize : 26
  },
  popUpDetailStyle : {
    fontSize : 14
  }
})

export{
  showDialog,
  showMultiDialogs
}